<template>
  <div id="home">
    <!-- 顶部导航条 -->
    <nav-bar>
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control
      ref="tabControl2"
      class="tab-contril tab-contril2"
      :titles="['流 行', '新 款', '精 选']"
      @getTabIndex="getTabIndex"
      v-show="isTabFixed"
    ></tab-control>

    <scroll
      class="wrapper"
      ref="scroll"
      :probe-type="3"
      @scroll="wrapperScroll"
      @pullingUp="wrapperPullingUp"
    >
      <!-- 轮播图 -->
      <home-swiper :banners="banners" class="home-swiper"></home-swiper>
      <recommend-view
        class="recommend"
        :recommends="recommends"
      ></recommend-view>
      <tab-control
        ref="tabControl"
        class="tab-contril"
        :titles="['流 行', '新 款', '精 选']"
        @getTabIndex="getTabIndex"
      ></tab-control>
      <goods-list :goodsList="goods[currentType].list"></goods-list>
    </scroll>
    <!-- 组件需要加修饰符native才允许监听 -->
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import { getHomeMultidata, getHomeGoods } from "network/home.js";

import NavBar from "components/commom/navbar/NavBar";
import Scroll from "components/commom/scroll/Scroll";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/content/backTop/BackTop";

import HomeSwiper from "./child/HomeSwiper";
import RecommendView from "./child/RecommendView";

export default {
  name: "Home",
  data() {
    return {
      // 数据请求过多，用多个变量保存
      banners: [],
      recommends: [],
      // tabControl
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      // 定义一个变量，用来确定tabControl访问哪个类型的数据，默认访问第一个pop
      currentType: "pop",
      isShowBackTop: false, // 默认回到顶部 不显示
      tabOffsetTop: 0, // tabControl的到顶距离
      isTabFixed: false, // 默认不吸顶
      saveY: 0, // 记录位置坐标
    };
  },
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
  },
  // 生命周期函数，当前组件创建完成，发送网络请求
  created() {
    this.getHomeMultidata();

    // 一旦组件创建完成，把pop、new、sell共3种数据的page1请求下来
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted() {
    this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop;
  },
  // 生命周期函数-路由进来
  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);
    this.$refs.scroll.scroll.refresh();
  },
  // 生命周期函数-路由离开
  deactivated() {
    this.saveY = this.$refs.scroll.scroll.y;
  },
  methods: {
    // 分类 --- 网络请求
    getHomeMultidata() {
      // 请求多个数据
      getHomeMultidata().then((res) => {
        // 函数请求数据后函数销毁，所以把请求结果result保存到data里面
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1; // 每次访问或者下拉刷新重新请求页面，页码+1
      // http://152.136.185.210:7878/api/m5/home/data?type=pop&page=1
      getHomeGoods(type, page).then((res) => {
        // 函数请求数据后函数销毁，所以把每次请求的结果插入到data里面list数组里面
        this.goods[type].list.push(...res.data.list); // 把每次请求的list数据合并保存
        this.goods[type].page += 1; // 每次请求保存总页码
        // 请求完成以后执行scroll.vue里面的finishPullUp()方法，才能再次进行上拉刷新
        this.$refs.scroll.finishPullUp();
      });
    },

    // 分类 --- 事件监听
    // 将tabcontrol传进来的index和数据类型名称对应
    getTabIndex(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl.currentIndex = this.$refs.tabControl2.currentIndex = index;
    },
    backClick() {
      // this.$refs.scroll,访问子组件的scroll的数据
      // 提高访问子组件的scroll的scroll属性调用scrollTo()方法，重复代码太多不清晰，可在子组件内进行封装
      // this.$refs.scroll.scroll.scrollTo(0, 0, 200);
      // 面向子组件开发，直接通过this.$refs.scroll访问子组件内封装过的scrollTo()方法
      this.$refs.scroll.scrollTo(0, 0);
    },
    // 1.scroll组件通过自定义事件传来的监听滚动的position信息
    wrapperScroll(position) {
      // 判断回到顶部是否显示
      this.isShowBackTop = position.y < -350;
      // tabControl吸顶
      this.isTabFixed = position.y < -this.tabOffsetTop;
    },
    wrapperPullingUp() {
      console.log("加载");
      // 执行依据封装过的getHomeGoods()函数，获取后面的数据
      this.getHomeGoods(this.currentType);
      // 图片的加载使content的高度发生改变,执行
      this.$refs.scroll.scroll.refresh();
    },
  },
};
</script>

<style scoped lang="less">
#home {
  position: relative;
}
.home-swiper {
  height: 212px;
}
.recommend {
  height: 120px;
}
.wrapper {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: calc(100vh - 44px - 60px);
  // border: 1px solid orange;
  overflow: hidden;
  // background-color: #fff;
}
.tab-contril {
  position: relative;
  z-index: 99;
}
.tab-contril2 {
  box-shadow: 0 3px 3px #aaa;
}
</style>
